import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Row, Col, Typography, Space, Button, Divider } from 'antd';
import {
  GlobalOutlined,
  SafetyCertificateOutlined,
  ContainerOutlined,
  BarChartOutlined,
  UserOutlined,
  SettingOutlined,
  PlusOutlined,
  FileAddOutlined,
  CloudUploadOutlined,
} from '@ant-design/icons';
import { useAuthStore } from '../store/auth';

const { Title, Text } = Typography;

interface ProductCard {
  key: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  path: string;
  buttonText: string;
  providers: string[];
  color: string;
}

interface QuickAction {
  title: string;
  description: string;
  icon: React.ReactNode;
  path: string;
  buttonText: string;
  color: string;
}

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const { user } = useAuthStore();

  const productCards: ProductCard[] = [
    {
      key: 'sites',
      title: '站点管理',
      description: '管理您的网站和域名配置',
      icon: <GlobalOutlined style={{ fontSize: 24, color: '#1890ff' }} />,
      path: '/app/sites',
      buttonText: '立即管理',
      providers: ['支持多种域名配置、SSL证书管理'],
      color: '#1890ff',
    },
    {
      key: 'certificates',
      title: '证书中心',
      description: 'SSL证书申请、续期和管理',
      icon: <SafetyCertificateOutlined style={{ fontSize: 24, color: '#52c41a' }} />,
      path: '/app/certificates',
      buttonText: '立即申请',
      providers: ['支持Let\'s Encrypt、阿里云、腾讯云等'],
      color: '#52c41a',
    },
    {
      key: 'containers',
      title: '容器服务',
      description: 'Docker容器部署和管理',
      icon: <ContainerOutlined style={{ fontSize: 24, color: '#722ed1' }} />,
      path: '/app/containers',
      buttonText: '立即部署',
      providers: ['支持K8S集群、镜像管理、自动部署'],
      color: '#722ed1',
    },
    {
      key: 'analytics',
      title: '统计分析',
      description: '查看系统使用情况和性能数据',
      icon: <BarChartOutlined style={{ fontSize: 24, color: '#fa541c' }} />,
      path: '/app/analytics',
      buttonText: '查看报告',
      providers: ['实时监控、性能分析、使用统计'],
      color: '#fa541c',
    },
  ];

  const adminCards: ProductCard[] = user?.is_superuser ? [
    {
      key: 'users',
      title: '用户管理',
      description: '管理系统用户和权限',
      icon: <UserOutlined style={{ fontSize: 24, color: '#13c2c2' }} />,
      path: '/app/admin/users',
      buttonText: '管理用户',
      providers: ['用户权限管理、角色分配'],
      color: '#13c2c2',
    },
    {
      key: 'settings',
      title: '系统设置',
      description: '系统配置和参数设置',
      icon: <SettingOutlined style={{ fontSize: 24, color: '#eb2f96' }} />,
      path: '/app/admin/settings',
      buttonText: '系统配置',
      providers: ['全局配置、安全设置、系统维护'],
      color: '#eb2f96',
    },
  ] : [];

  const quickActions: QuickAction[] = [
    {
      title: '新建站点',
      description: '快速创建和配置新的网站',
      icon: <PlusOutlined style={{ fontSize: 20, color: '#1890ff' }} />,
      path: '/app/sites/new',
      buttonText: '立即创建',
      color: '#1890ff',
    },
    {
      title: '申请证书',
      description: '为您的网站申请SSL证书',
      icon: <FileAddOutlined style={{ fontSize: 20, color: '#52c41a' }} />,
      path: '/app/certificates/apply',
      buttonText: '立即申请',
      color: '#52c41a',
    },
    {
      title: '部署容器',
      description: '快速部署Docker应用',
      icon: <CloudUploadOutlined style={{ fontSize: 20, color: '#722ed1' }} />,
      path: '/app/containers/new',
      buttonText: '立即部署',
      color: '#722ed1',
    },
  ];

  const allCards = [...productCards, ...adminCards];

  const handleCardClick = (path: string) => {
    navigate(path);
  };

  const renderProductCard = (card: ProductCard) => (
    <Card
      key={card.key}
      hoverable
      style={{
        height: '200px',
        borderRadius: '8px',
        border: '1px solid #f0f0f0',
        cursor: 'pointer',
      }}
      bodyStyle={{
        padding: '20px',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}
      onClick={() => handleCardClick(card.path)}
    >
      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
        <div>{card.icon}</div>
        <div>
          <Title level={4} style={{ margin: 0, marginBottom: '8px', fontSize: '16px' }}>
            {card.title}
          </Title>
          <Text style={{ 
            color: '#666', 
            fontSize: '13px',
            lineHeight: '1.4',
          }}>
            {card.description}
          </Text>
        </div>
        
        <Button
          type="primary"
          size="small"
          style={{
            width: '100%',
            height: '32px',
            borderRadius: '4px',
            fontSize: '13px',
            backgroundColor: card.color,
            borderColor: card.color,
          }}
        >
          {card.buttonText}
        </Button>
      </Space>
      
      <Text 
        type="secondary" 
        style={{ 
          fontSize: '11px',
          lineHeight: '16px',
          marginTop: '8px',
        }}
      >
        {card.providers.join('，')}
      </Text>
    </Card>
  );

  const renderQuickAction = (action: QuickAction) => (
    <Card 
      key={action.title}
      hoverable
      style={{ 
        borderRadius: '6px',
      }}
      bodyStyle={{ padding: '16px' }}
      onClick={() => handleCardClick(action.path)}
    >
      <Space direction="vertical" size="small" style={{ width: '100%' }}>
        <div style={{ marginBottom: '6px' }}>{action.icon}</div>
        <Title level={5} style={{ margin: 0, fontSize: '14px' }}>
          {action.title}
        </Title>
        <Text type="secondary" style={{ fontSize: '12px', lineHeight: '1.3' }}>
          {action.description}
        </Text>
        <Button 
          type="primary" 
          size="small"
          style={{ 
            marginTop: '8px',
            backgroundColor: action.color,
            borderColor: action.color,
          }}
        >
          {action.buttonText}
        </Button>
      </Space>
    </Card>
  );

  return (
    <div style={{
      padding: '20px',
      paddingRight: '28px' // 20px + 8px for scrollbar
    }}>
      {/* 欢迎区域 */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={2} style={{ marginBottom: '8px', color: '#262626', fontSize: '20px' }}>
          欢迎，{user?.full_name || user?.username}
        </Title>
        <Text style={{ fontSize: '14px', color: '#595959' }}>
          选择一个产品开始使用
        </Text>
      </div>

      {/* 产品卡片网格 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        {allCards.map((card) => (
          <Col xs={24} sm={12} lg={8} xl={6} key={card.key}>
            {renderProductCard(card)}
          </Col>
        ))}
      </Row>

      <Divider />

      {/* 快速操作区域 */}
      <div style={{ marginTop: '16px' }}>
        <Title level={3} style={{ marginBottom: '16px', color: '#262626', fontSize: '16px' }}>
          快速操作
        </Title>
        <Row gutter={[16, 16]}>
          {quickActions.map((action) => (
            <Col xs={24} sm={12} md={8} key={action.title}>
              {renderQuickAction(action)}
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default Dashboard; 